<template>
  <section class="flex flex-wrap items-center">
    <StepperItem
      v-for="(step, index) in steps"
      :key="index"
      :status="step.status"
      :label="step.label"
      :step-number="index + 1"
      :is-first="index === 0"
      :is-last="index === steps.length - 1"
      :is-current="step.status === 'current'"
    />
  </section>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import StepperItem from './StepperItem.vue'

export type StepStatus = 'completed' | 'current' | 'upcoming'

export interface Step {
  label: string
  status: StepStatus
}

interface Props {
  steps: Step[]
}

const props = defineProps<Props>()

// Validate that there's exactly one current step
const isValid = computed(() => {
  const currentSteps = props.steps.filter((step) => step.status === 'current')
  return currentSteps.length === 1
})

// Log warning if validation fails
if (!isValid.value) {
  console.warn('Stepper should have exactly one current step')
}
</script>
